<template>
    <section>
         <div>
            <el-col class="clock-card" v-for="(device, index) in cardData" :key="index">
                <el-card class="clock-box-card">
                    <el-button style="width: 100%" icon="el-icon-switch-button" type="primary" @click="pushButton(device)" round>{{aliasName[index]}}</el-button>
					<div class="block">
						<div style="margin-top: 20%;">
							<el-slider v-model="device.Delay" :step="1" :min = "1" :max = "10" show-stops></el-slider>
						</div>
					</div>
					<div style="text-align: center; margin-top: 10%; font-size: 18px; color: #39E3DE">
						<el-input oninput="value=value.replace(/\D/g,'')" style="width: 36%" v-model="device.Delay"></el-input> 分
					</div>
                </el-card>
            </el-col>
        </div>
    </section>
</template>

<style>
	.clock-card {
		padding: 5px 5px;
		width: 200px
    }
    .clock-box-card {
		width: 190px;
		height: 190px;
    }
</style>

<script>
	
	import {getButtonIndex, delayButton} from '../../api/api'

    export default {
        data() {
            return {
            	cardData: [],
               	aliasName: []
            };
        },
        methods: {
           getButton() {
                getButtonIndex().then((res) => {
                    if (res.data.code == "SUCCESS") {
                        let mid = "";
                        let dataList = res.data.data.split(',');
                        // 排序
                        for (let i=0; i < dataList.length-1; i++) {
                            for (let j=0; j < dataList.length-1-i; j++) {
                                if (dataList[j] > dataList[j+1]) {
                                   mid = dataList[j];
                                   dataList[j] = dataList[j+1];
                                   dataList[j+1] = mid;
                                }
                            }
                        }
                        let list = [];
                        // 分割
                        dataList.map((status, s1) => {
                            if (status != "") {
                                let device = status.split(":");
                                this.aliasName[s1] = device[0];
                                if (device.length == 2) {
                                    // 显示别名
                                    res.data.info.split(',').map((alias, s2) => {
                                        let name = alias.split(":");
                                        if (name.length == 2 && device[0] == name[0] && name[0] != name[1]) {
                                            this.aliasName[s1] = name[1]
                                        }
                                    })
                                    list[s1] = {Name: device[0], Delay: 3}
                                }
                            }
                        })
                        this.cardData = list;
                    }
                });
            },
            pushButton(device) {
                delayButton({name:device.Name, delay: device.Delay}).then((res) => {
                    if (res.code == "SUCCESS") {
                        this.$message({
                            message: "定时" +device.Delay + "分钟",
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
            }
        },
        mounted() {
        	this.getButton();
        }
    }
</script>
